﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>栅格系统演示</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <style type="text/css">
        .row div {
            border: 1px solid black;
            text-align: center;
            background-color: #F0F0F0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>栅格系统演示</h1>
        <ul>
            <li>超小设备：xs &lt; 768px</li>
            <li>超小设备：992px &gt; sm &ge; 768px</li>
            <li>中等设备：1200px &gt; md &ge; 992px</li>
            <li>大屏设备：lg &ge; 1200px</li>
        </ul>

        <div class="row">
            <div class="col-lg-3">lg3</div>
            <div class="col-lg-3">lg3</div>
            <div class="col-lg-3">lg3</div>
            <div class="col-lg-3">lg3</div>
        </div>

        <h4>在不同屏幕宽度的设备下，设置不同的宽度</h4>
        <div class="row">
            <div class="col-md-3 col-sm-4 col-xs-6">md3-sm4-xs6</div>
            <div class="col-md-3 col-sm-4 col-xs-6">md3-sm4-xs6</div>
            <div class="col-md-3 col-sm-4 col-xs-6">md3-sm4-xs6</div>
            <div class="col-md-3 col-sm-4 col-xs-6">md3-sm4-xs6</div>
        </div>

        <h4>设置偏移</h4>
        <div class="row">
            <div class="col-md-3 col-md-offset-3">md3 offset3</div>
            <div class="col-md-3 col-md-offset-1">md3 offset1</div>
        </div>

        <h4>push向右拉动列的位置，pull向左拉动列的位置 (相对于默认位置)</h4>
        <div class="row">
            <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
            <div class="col-md-3 col-md-pull-8">.col-md-3 .col-md-pull-8</div>
        </div>
        
        <div class="row">
  			<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3 
  						Resize your viewport or check it out on your phone for an example.</div>
 			 <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  			<!-- Add the extra clearfix for only the required viewport -->
 			 <div class="clearfix visible-xs-block"></div>

  			<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
 			 <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
		</div>
    </div>
</body>
</html>
